<template>
  <!-- // 这是头部   -->
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 70%;" class="filter-item" placeholder="请输商品名称多个用' | '隔开,最多10个" v-model="search.product_name">
      </el-input>
      <el-button class="filter-item" type="primary"  plain v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <!-- <el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download"  v-roles="'export_product'" @click="handleDownload">导出</el-button> -->
    </div>
    <!-- // 这是内容 -->
    <tree-table :data="listData" :evalFunc="funcTree" :expandAll="true" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row stripe>
      <el-table-column align="center" label="图片" width="80">
        <template slot-scope="scope">
           <span><img :src="scope.row.thumb" style="width:60px;height:80px" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' /></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标题">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="条形码">
        <template slot-scope="scope">
           <span v-if="cellShow"><el-input @change="handleBlur(scope.row)" v-model="scope.row.bar_code"></el-input></span>
          <span v-else @click="cellShow=true" style="color:#F56C6C">{{scope.row.bar_code}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="归属店">
        <template slot-scope="scope">
          <span>{{scope.row.hotel_name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="平台售价" width="100">
        <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
       <el-table-column align="center" label="商家售价" width="100">
        <template slot-scope="scope">
           <span>{{scope.row.reseller_price}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="类型" width="150">
        <template slot-scope="scope">
            <el-tag>{{scope.row.category_name}}</el-tag>&nbsp;
        </template>
      </el-table-column>
      <!-- //这里是操作   -->
    </tree-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <!--编辑窗口  END -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="5"></back-to-top>
    </el-tooltip>
  </div>
</template>


<script>
import waves from '@/directive/waves' // 水波纹指令
import BackToTop from '@/components/BackToTop' // 回到顶部
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'
import * as api from '@/api/main-api' // API
import { mapGetters } from 'vuex'

export default {
  name: 'ProductList',
  directives: {
    waves
  },
  components: { BackToTop, treeTable },
  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'z-index': '9999',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },
      listData: [],
      listLoading: false,
      search: {
        product_name: ''
      },
      listQuery: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      funcTree: treeToArray,
      cellShow: false
    }
  },

  // 初始化数据
  created() {
    this.listQuery.unit_id = this.outlet_id
    if (Object.keys(this.set_page_params).length > 0) {
      this.listQuery = this.set_page_params
    }
    setTimeout(() => {
      this.fetchData()
    }, 100)
    this.$store.dispatch('setPageParams', {}) // 回归原来的状态
  },

  computed: {
    ...mapGetters([
      'outlet_id',
      'set_page_params'
    ])
  },

  methods: {
    // 指定商品条形码修改
    handleBlur(row, type) {
      var data = {
        id: row.id,
        unit_id: row.unit_id
      }
      data.bar_code = row.bar_code
      this.postData(data, row)
      this.cellShow = false
    },

    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 翻页
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },
    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      this.listQuery = Object.assign(this.listQuery, this.search)
      return new Promise((resolve, reject) => {
        api.searchAllProductApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.total = parseInt(response.data.total)
          }
          this.listLoading = false
        })
      })
    },

    // 商品提交数据
    postData(data, row) {
      api.editBarCodeApi(data, row).then(response => {
        if (response.data.data === true || response.data.code === 0) {
          this.$root.message('操作成功', 'success')
        }
      })
    }

  }

}
</script>


<style>
  .el-table .warning-row {
    background: rgb(241, 216, 193);
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
